import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { authAPI } from '../services/api';

const Login: React.FC = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    try {
      const response = await authAPI.login(formData);
      login(response.token, response.user);
      navigate('/');
    } catch (error: any) {
      setError(error.message || '登录失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="min-h-screen bg-black flex flex-col">
      {/* 顶部导航 */}
      <div className="flex items-center justify-between p-4">
        <button 
          onClick={() => navigate('/')}
          className="text-white text-lg"
        >
          ✕
        </button>
        <h1 className="text-white text-lg font-bold">登录</h1>
        <div className="w-6"></div>
      </div>

      <div className="flex-1 flex flex-col justify-center px-6">
        {/* Logo */}
        <div className="text-center mb-12">
          <div className="w-20 h-20 bg-gradient-to-r from-red-500 to-pink-500 rounded-full mx-auto mb-4 flex items-center justify-center">
            <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </div>
          <h2 className="text-white text-2xl font-bold mb-2">欢迎回来</h2>
          <p className="text-gray-400">登录你的快手账号</p>
        </div>

        {/* 登录表单 */}
        <form onSubmit={handleSubmit} className="space-y-6">
          {error && (
            <div className="bg-red-900 text-red-200 px-4 py-3 rounded-lg">
              {error}
            </div>
          )}

          <div>
            <label htmlFor="email" className="block text-white text-sm font-medium mb-2">
              手机号/邮箱
            </label>
            <input
              id="email"
              name="email"
              type="email"
              value={formData.email}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请输入手机号或邮箱"
              required
            />
          </div>

          <div>
            <label htmlFor="password" className="block text-white text-sm font-medium mb-2">
              密码
            </label>
            <input
              id="password"
              name="password"
              type="password"
              value={formData.password}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请输入密码"
              required
            />
          </div>

          <div className="flex items-center justify-between">
            <label className="flex items-center">
              <input type="checkbox" className="mr-2" />
              <span className="text-gray-400 text-sm">记住我</span>
            </label>
            <Link to="/forgot-password" className="text-red-500 text-sm hover:text-red-400">
              忘记密码？
            </Link>
          </div>

          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-gradient-to-r from-red-500 to-pink-500 text-white py-3 rounded-lg font-medium hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? '登录中...' : '登录'}
          </button>
        </form>

        {/* 其他登录方式 */}
        <div className="mt-8">
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-700"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-black text-gray-400">其他登录方式</span>
            </div>
          </div>

          <div className="mt-6 grid grid-cols-3 gap-4">
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">微</span>
              </div>
              <span className="text-gray-400 text-xs">微信</span>
            </button>
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">Q</span>
              </div>
              <span className="text-gray-400 text-xs">QQ</span>
            </button>
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">微</span>
              </div>
              <span className="text-gray-400 text-xs">微博</span>
            </button>
          </div>
        </div>

        {/* 注册链接 */}
        <div className="mt-8 text-center">
          <p className="text-gray-400">
            还没有账号？
            <Link to="/register" className="text-red-500 hover:text-red-400 font-medium">
              立即注册
            </Link>
          </p>
        </div>
      </div>

      {/* 底部协议 */}
      <div className="p-6 text-center">
        <p className="text-gray-500 text-xs">
          登录即表示同意
          <Link to="/terms" className="text-red-500 hover:text-red-400">用户协议</Link>
          和
          <Link to="/privacy" className="text-red-500 hover:text-red-400">隐私政策</Link>
        </p>
      </div>
    </div>
  );
};

export default Login; 